<template>
    <div id="selectTree">
        <div class="dse-select">
      <div class="dse-input" @click="showSubTree">
        <input type="text" readonly v-model="searchNames">
        <i class="el-icon-arrow-down" :class="{rotateEle:rotateEle}"></i>
      </div>
      <div class="sub-model" v-show="data_.length&&subTreeFlag">
        <!-- <v-jstree :data="data_"  show-checkbox multiple=false allow-batch whole-row @item-click="itemClick"></v-jstree> -->
        <el-tree
          :data="data_"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick">
        </el-tree>
        <div class="config">
          <el-button type="primary" @click="cancel">取消</el-button>
          <el-button type="primary" @click="config">确定</el-button>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
/**
 *
 *      --------------------------
 *      |   XXX,YYY               |
 *      --------------------------
 *      ---------------------------
 *      |  + AAA                  |
 *      |       - AAA1            |
 *      |       - AAA2            |
 *      |  + BBB                  |
 *      |       - BBB1            |
 *      |                         |
 *      |  取消            确定    |
 *      |_________________________|
 *
 *  传值 树的数组 waterWorksTree
 * 往外发射 选中的值 showSelectLists
 */
import VJstree from "vue-jstree";
export default {
  name: "HelloWorld",
  components: {
    VJstree
  },
  props: ["waterWorksTree"],
  data() {
    return {
      rotateEle: false,
      subTreeFlag: false,
      temp_searchNames: "",
      searchNames: "",
      data_: [],
      defaultProps: {
        children: "children",
        label: "label",
        id: "id"
      },
      selected: null
    };
  },
  methods: {
    cancelSelect(arr, selectIndex) {
      let temp_arr = arr;
      let len = temp_arr.length;
      if (temp_arr.length > 0) {
        for (let i = 0; i < len; i++) {
          if (i != selectIndex) {
            temp_arr[i].selected = false;
            if (temp_arr[i].children && temp_arr[i].children.length) {
              for (let j = 0; j < temp_arr[i].children.length; j++) {
                temp_arr[i].children[j].selected = false;
              }
            }
          }
        }
      }
      return temp_arr;
    },
    pearentFlag(arr) {
      let temp_arr = arr;
      let flag = false;
      if (temp_arr.length) {
        for (let i = 0; i < temp_arr.length; i++) {
          if (temp_arr[i].selected == true) {
            flag = true;
            break;
          }
        }
      }
      return flag;
    },
    itemClick(node, item, e) {
      // let that = this;
      // let temp_index = parseInt(item.id) - 1;
      // let subItem_index = "";
      // let temp_str = item.id;
      // if (temp_str.length == 1) {
      //   that.data_[temp_index].opened = that.data_[temp_index].selected
      //     ? true
      //     : false;
      //   that.data_ = that.cancelSelect(that.data_, temp_index);
      // } else {
      //   temp_index = parseInt(temp_str.substring(0, 1)) - 1;
      //   subItem_index = parseInt(temp_str.substring(1)) - 1;
      //   let flag = that.pearentFlag(that.data_[temp_index].children);
      //   if (flag) {
      //     that.data_[temp_index].selected = true;
      //   } else {
      //     that.data_[temp_index].selected = false;
      //   }
      //   that.data_ = that.cancelSelect(that.data_, temp_index);
      // }
      // let temp_search = "";
      // let temp_selectList = that.data_[temp_index].children.filter(item => {
      //   return item.selected == true;
      // });
      // if (temp_selectList.length) {
      //   for (let i = 0; i < temp_selectList.length; i++) {
      //     temp_search += temp_selectList[i].text + ",";
      //   }
      //   if (temp_selectList.length == that.data_[temp_index].children.length) {
      //     temp_search = that.data_[temp_index].text;
      //   }
      // }
      // that.temp_searchNames = temp_search;
    },
    showSubTree() {
      this.rotateEle = true;
      this.subTreeFlag = true;
    },
    config() {
      let that = this;
      this.subTreeFlag = false;
      this.rotateEle = false;
      // this.searchNames = this.temp_searchNames;
      this.searchNames = this.selected.label;
      this.$emit("showSelectLists", that.selected);
    },
    cancel() {
      this.subTreeFlag = false;
      this.rotateEle = false;
      this.searchNames = "";
      this.$emit("showSelectLists", "");
    },
    handleNodeClick(data) {
      this.selected = data;
    }
  },
  mounted() {},
  created() {
    this.data_ = this.waterWorksTree;
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
#selectTree {
  width: 100%;
  //   height: 100%;
  .dse-select {
    width: 100%;
    .dse-input {
      width: 100%;
      height: 25px;
      line-height: 25px;
      position: relative;
      margin-bottom: 10px;
      cursor: pointer;
      input {
        display: inline-block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        border-radius: 5px;
        border: 1px solid #c0c4cc;
        padding-left: 5px;
        font-size: 12px;
        color: #333;
      }
      i {
        position: absolute;
        right: 8px;
        top: 8px;
        transform: rotate(-90deg);
        transition: all 1s;
      }
      i.rotateEle {
        transform: rotate(0deg);
      }
    }
    .sub-model {
      width: 100%;
      //   height: 150px;
      overflow: auto;
      background: #fff;
      transition: all 1s;
      position: relative;
      z-index: 100;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      .config {
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: center;
      }
    }
  }
}

/* .sub-model:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid red;
} */
</style>


